import { FormItemRule } from "element-plus";
import { FormItem } from "./form-item";
import { BaseComponent } from "../type";
import { ButtonItem } from "./button-item";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { FormItemComponentType } from "./components";
export type ButtonStyle = "primary" | "success" | "danger" | "warning" | "default" | "info";
export type ElementIconType = keyof typeof ElementPlusIconsVue;
export interface BasicFormOptions<T> {
	/** 表单的编辑模式与预览模式,默认为edit */
	type?: "edit" | "preview";
	/** 表单item的配置 */
	options: FormItemOptions<T>[];
	/** formItem一排放几个 */
	lineNum?: number;
	/** 水平 and 垂直布局 */
	layout?: "horizontal" | "vertical";
	btnList?: ButtonItemOptions[];
	/** 标签宽度 */
	labelWidth?: string;
	width?: string;
}
export type FormItemRuleKey = "RequiredRule" | "Number" | "PhoneNumber";
export type FormItemOptions<T> = {
	/** 表单的key */
	key: keyof T;
	/** 表单的标题 */
	label: string;
	/** 表单的值*/
	value: T[keyof T];
	/** 输入框内的占位符 */
	placeholder?: string;
	/** 是否禁用 */
	disabled?: boolean;
	/** 表单的校验规则,默认实现一些校验,如果是RequiredRule,则默认配置必填校验 */
	rule?: FormItemRuleKey | FormItemRule[];
	/** 宽度 */
	width?: string;
} & FormItemComponentType;

/**按钮 */
export interface ButtonItemOptions {
	key: string;
	label: string;
	disabled?: boolean;
	icon?: ElementIconType;
	type?: ButtonStyle;
	click?: () => void;
}

export interface FormBox<Form> extends BaseComponent {
	/**
	 * 新增表单项
	 * @param opts
	 */
	addFormItem(opts: FormItemOptions<Form>): FormItem<Form>;
	/**
	 * 删除key所关联表单item项
	 * @param key 表单的key
	 */
	removeFormItem(key: keyof Form): void;
	/**
	 * 根据key获取表单数据
	 * @param key 表单的key
	 */
	getFormItemValue(key: keyof Form): FormItem<Form>;

	/**
	 * 根据key设置表单的数据
	 * @param key 表单的key
	 * @param value 设置的值
	 */
	setFormItemValue(key: keyof Form, value: Form[keyof Form]): void;

	/**
	 * 获取表单数据，调用该方法自动进行表单校验
	 */
	getFormValue(): Form;
	/**
	 * 设置表单数据
	 * @param form 表单数据
	 */
	setFormValue(form: Form): void;
	/**
	 * 设置表单某项禁用
	 * @param key 禁用的key
	 * @param state 禁用的状态
	 */
	setFormItemDisabled(key: string, state: boolean): void;
	/**
	 * 设置表单禁用
	 * @param state 禁用状态，布尔值
	 */
	setFormDisabled(state: boolean): void;
	/**
	 * 获取当前表单的配置项
	 */
	getFormConf(): FormItemOptions<Form>[];
	/**
	 * 重置表单
	 */
	reset(): void;
	/**
	 * 表单校验
	 * @return Promise<boolean>
	 */
	verify(): Promise<boolean>;

	/**新增表单按钮 */
	addFormButton(opts: ButtonItemOptions): ButtonItem;

	/**移除表单按钮 */
	removeFormButton(key: string): void;

	/**设置表单按钮禁用 */
	setFormButtonDisabled(key: string, state: boolean): void;
}
